<template>
  <div class="container1">
    <div class="common-title-flex">
      <div class="common-title-div"></div>
      <div class="common-title-text">数据筛选</div>
    </div>
    <el-form
      :model="profileObj"
      ref="profileObj"
      label-width="180px"
      class="demo-ruleForm"
      size="mini"
      style="margin-bottom: -10px; margin-top: 10px"
    >
      <el-row>
        <el-col span="10">
          <el-form-item label="公司全称" class="required-content-red">
            <el-input
              v-model="profileObj.companyTitle"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="公司简称">
            <el-input
              v-model="profileObj.companyAddrevition"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="公司地址" class="required-content-red">
            <el-input
              v-model="profileObj.companyAddres"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="单位电话" class="required-content-red">
            <el-input
              v-model="profileObj.workPhone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col span="10">
          <el-form-item label="社会信用代码" class="required-content-red">
            <el-input
              v-model="profileObj.socialCredit"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="注册日期" class="required-content-red">
            <el-input
              v-model="profileObj.registrationData"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="注册资本" class="required-content-red">
            <el-input
              v-model="profileObj.registeredCapital"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="企业规模" class="required-content-red">
            <el-select
              v-model="profileObj.companyScale"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="企业性质" class="required-content-red">
            <el-select
              v-model="profileObj.companyNature"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="联系人" class="required-content-red">
            <el-input
              v-model="profileObj.contacts"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="联系手机" class="required-content-red">
            <el-input
              v-model="profileObj.contactsPhone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="10">
          <el-form-item label="企业网址">
            <el-input
              v-model="profileObj.enterpriseWebsite"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="20">
          <el-form-item label="企业介绍" class="required-content-red">
            <el-input
              v-model="profileObj.companyProfile"
              placeholder="请输入"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="20">
          <el-form-item label="企业标签" class="required-content-red">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="定期团建"></el-checkbox>
              <el-checkbox label="综合补贴"></el-checkbox>
              <el-checkbox label="包吃包住"></el-checkbox>
              <el-checkbox label="五险一金"></el-checkbox>
              <el-checkbox label="绩效奖金"></el-checkbox>
              <el-checkbox label="年终奖金"></el-checkbox>
              <el-checkbox label="员工旅游"></el-checkbox>
              <el-checkbox label="节日福利"></el-checkbox>
              <el-checkbox label="周末双休"></el-checkbox>
              <el-checkbox label="带薪休假"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--图片上传-->
        <el-col :span="5">
          <el-form-item
            label="图片上传"
            style="width: 50px"
            class="required-content-red"
          >
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-camera avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <div
            style="
              font-size: 12px;
              color: #aaa;
              margin-left: 30px;
              margin-bottom: 10px;
            "
          >
            尺寸：560px*340px
          </div>
          <div
            style="
              font-size: 12px;
              color: #aaa;
              margin-left: 30px;
              margin-bottom: 10px;
            "
          >
            只能上传jpg/png格式化文件，文件不能超过50kb
          </div>
          <div style="font-size: 12px; margin-left: 30px">最多上传6张</div>
        </el-col>
        <!--上传视频-->
        <el-col :span="5">
          <el-form-item
            label="视频上传"
            style="width: 50px"
            class="required-content-red"
          >
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-camera avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <div
            style="
              font-size: 12px;
              color: #aaa;
              margin-left: 30px;
              margin-bottom: 10px;
            "
          >
            大小：小于200M
          </div>
          <div style="font-size: 12px; color: #aaa; margin-left: 30px">
            视频格式支持：MP4、AVI、MOV等
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="margin-bottom: 20px" align="center">
          <el-button type="primary" @click="submitForm" icon="el-icon-search"
            >编辑</el-button
          >

          <el-button
            type="warning"
            @click="resetForm"
            icon="el-icon-search"
            plain
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "dengmiQuery",
  data() {
    return {
      profileObj: {
        companyTitle: "",
        companyAddrevition: "",
        companyAddres: "",
        workPhone: "",
        socialCredit: "",
        registrationData: "",
        registeredCapital: "",
        contacts: "",
        contactsPhone: "",
        enterpriseWebsite: "",
        companyProfile: "",
        companyNature: "",
        companyScale: "",
      },
      checkList: [],
      //企业性质
      options: [
        {
          value: "选项1",
          label: "外资企业",
        },
      ],
      //企业规模
      options1: [
        {
          value: "选项1",
          label: "10-50",
        },
      ],
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style scoped>
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 150px;
  height: 36px;
}
/* 图片上传 */
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 22px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
span {
  display: block;
  font-size: 5px;
  text-align: center;
}
</style>